<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单详情</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #07c160;
      --secondary-color: #f8f8f8;
      --text-color: #333;
      --light-text: #666;
      --border-color: #eaeaea;
      --success-color: #07c160;
      --danger-color: #fa5151;
      --warning-color: #ffc300;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-color);
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }
    
    .container {
      max-width: 100%;
      padding: 0;
      overflow-x: hidden;
    }
    
    /* 顶部导航栏 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: #fff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0 15px;
    }
    
    .navbar-title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      flex: 1;
    }
    
    .navbar-back {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }

    /* 订单状态样式 */
    .order-status-bar {
      background-color: var(--primary-color);
      color: white;
      padding: 15px;
      display: flex;
      align-items: center;
    }
    
    .order-status-icon {
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      font-size: 20px;
    }
    
    .order-status-text {
      display: flex;
      flex-direction: column;
    }
    
    .order-status-main {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .order-status-detail {
      font-size: 13px;
      opacity: 0.8;
    }
    
    /* 内容区块样式 */
    .content-block {
      background-color: white;
      margin: 10px 0;
      padding: 15px;
    }
    
    .block-title {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .block-subtitle {
      font-size: 13px;
      color: var(--light-text);
      margin-top: -10px;
      margin-bottom: 15px;
    }

    /* 摄影师信息样式 */
    .photographer-info {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .photographer-avatar {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      object-fit: cover;
      margin-right: 15px;
    }
    
    .photographer-name {
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    /* 详情列表样式 */
    .detail-list {
      margin-bottom: 10px;
    }
    
    .detail-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 14px;
    }
    
    .detail-label {
      color: var(--light-text);
    }
    
    .detail-value {
      text-align: right;
      font-weight: 500;
    }
    
    /* 进度跟踪样式 */
    .progress-timeline {
      margin: 10px 0;
    }
    
    .timeline-item {
      display: flex;
      position: relative;
      padding-bottom: 15px;
    }
    
    .timeline-item:last-child {
      padding-bottom: 0;
    }
    
    .timeline-item::before {
      content: '';
      position: absolute;
      top: 24px;
      left: 10px;
      width: 1px;
      height: calc(100% - 24px);
      background-color: #e6e6e6;
    }
    
    .timeline-item:last-child::before {
      display: none;
    }
    
    .timeline-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      z-index: 1;
    }
    
    .dot-completed {
      background-color: var(--primary-color);
      color: white;
    }
    
    .dot-pending {
      background-color: #e6e6e6;
      color: white;
    }
    
    .timeline-content {
      flex: 1;
    }
    
    .timeline-title {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .timeline-time {
      font-size: 12px;
      color: var(--light-text);
    }
    
    /* 按钮样式 */
    .btn-group {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .btn {
      display: inline-block;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      font-size: 14px;
      cursor: pointer;
      text-align: center;
      flex: 1;
    }
    
    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }
    
    .btn-outline {
      background-color: transparent;
      border: 1px solid var(--border-color);
      color: var(--light-text);
    }
    
    /* 整体页面容器 */
    .page-container {
      padding-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="navbar">
      <div onclick="goBack()">
        <i class="fas fa-chevron-left navbar-back"></i>
      </div>
      <div class="navbar-title">订单详情</div>
      <div style="width: 24px;"></div>
    </div>
    
    <div class="page-container">
      <!-- 订单状态 -->
      <div class="order-status-bar">
        <div class="order-status-icon">
          <i class="fas fa-clock"></i>
        </div>
        <div class="order-status-text">
          <div class="order-status-main">等待拍摄</div>
          <div class="order-status-detail">已预约，等待拍摄日期</div>
        </div>
      </div>
      
      <!-- 摄影师信息 -->
      <div class="content-block">
        <div class="photographer-info">
          <img src="https://img.freepik.com/free-photo/attractive-stylish-young-woman-with-photo-camera_171337-9870.jpg" alt="摄影师头像" class="photographer-avatar">
          <div>
            <div class="photographer-name">艾米丽摄影工作室</div>
            <div style="font-size: 13px; color: var(--light-text);">专业人像摄影师</div>
          </div>
        </div>
        <div class="btn-group">
          <button class="btn btn-outline" onclick="contactPhotographer()">
            <i class="fas fa-comment"></i> 联系摄影师
          </button>
          <button class="btn btn-primary" onclick="viewPhotographerProfile()">
            <i class="fas fa-user"></i> 查看主页
          </button>
        </div>
      </div>
      
      <!-- 拍摄信息 -->
      <div class="content-block">
        <div class="block-title">拍摄信息</div>
        <div class="detail-list">
          <div class="detail-item">
            <div class="detail-label">预约时间</div>
            <div class="detail-value">2023-05-12 14:00</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">拍摄地点</div>
            <div class="detail-value">摄影棚拍摄</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">服务套餐</div>
            <div class="detail-value">高级套餐</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">拍摄时长</div>
            <div class="detail-value">2小时</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">套数</div>
            <div class="detail-value">2套服装</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">精修张数</div>
            <div class="detail-value">15张</div>
          </div>
        </div>
      </div>
      
      <!-- 订单跟踪 -->
      <div class="content-block">
        <div class="block-title">订单进度</div>
        <div class="progress-timeline">
          <div class="timeline-item">
            <div class="timeline-dot dot-completed">
              <i class="fas fa-check" style="font-size: 10px;"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">订单创建</div>
              <div class="timeline-time">2023-05-05 10:25</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-dot dot-completed">
              <i class="fas fa-check" style="font-size: 10px;"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">付款完成</div>
              <div class="timeline-time">2023-05-05 10:25</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-dot dot-pending">
              <i class="fas fa-circle" style="font-size: 8px;"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">拍摄阶段</div>
              <div class="timeline-time">预约于 2023-05-12 14:00</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-dot dot-pending">
              <i class="fas fa-circle" style="font-size: 8px;"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">照片处理</div>
              <div class="timeline-time">预计3-5个工作日</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-dot dot-pending">
              <i class="fas fa-circle" style="font-size: 8px;"></i>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">交付完成</div>
              <div class="timeline-time">等待中</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 价格详情 -->
      <div class="content-block">
        <div class="block-title">价格详情</div>
        <div class="detail-list">
          <div class="detail-item">
            <div class="detail-label">服务费</div>
            <div class="detail-value">¥299.00</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">优惠</div>
            <div class="detail-value">-¥0.00</div>
          </div>
          <div class="detail-item" style="font-weight: 500; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color);">
            <div>实付金额</div>
            <div class="detail-value" style="color: var(--primary-color);">¥299.00</div>
          </div>
        </div>
      </div>
      
      <!-- 订单信息 -->
      <div class="content-block">
        <div class="block-title">订单信息</div>
        <div class="detail-list">
          <div class="detail-item">
            <div class="detail-label">订单编号</div>
            <div class="detail-value">20230505102532587</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">创建时间</div>
            <div class="detail-value">2023-05-05 10:25</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">支付方式</div>
            <div class="detail-value">微信支付</div>
          </div>
        </div>
      </div>
      
      <!-- 底部按钮操作 -->
      <div class="content-block">
        <div class="btn-group">
          <button class="btn btn-outline" onclick="cancelOrder()">取消订单</button>
          <button class="btn btn-primary" onclick="changeAppointment()">修改预约</button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 返回上一页
    function goBack() {
      history.back();
    }
    
    // 联系摄影师
    function contactPhotographer() {
      alert('联系摄影师（在实际应用中会跳转到聊天页面）');
    }
    
    // 查看摄影师主页
    function viewPhotographerProfile() {
      window.location.href = 'photographer_detail.html';
    }
    
    // 取消订单
    function cancelOrder() {
      if (confirm('确定要取消此订单吗？')) {
        alert('订单已取消（在实际应用中会提交取消请求）');
        window.location.href = 'my_orders.html';
      }
    }
    
    // 修改预约
    function changeAppointment() {
      alert('修改预约（在实际应用中会跳转到修改页面）');
    }
  </script>
</body>
</html> 